<template>
  <div class="D_content">
    <div class="title"><span class="title_left">D3</span><span class="title_right">指定临时措施</span></div>
    <div class="bottom">
      <!-- 陈述内容 -->
      <div class="bot_con" v-if="descHtml == ''">
        <span class="bc_title">措施内容</span>
        <div class="bc_noCon" @click="openRichText('添加措施内容',1)"><i class="el-icon-plus"></i>措施内容</div>
      </div>
      <div class="bot_con" v-else>
        <span class="bc_title">措施内容<span @click="openRichText('修改措施内容',1,descHtml)">点击修改</span></span>
        <div class="getHtml" v-html="descHtml"></div>
      </div>
      <!-- 问题描述 -->
      <div class="bot_con" v-if="urgencyHtml == ''">
        <span class="bc_title">确认与验证</span>
        <div class="bc_noCon" @click="openRichText('添加确认与验证',2)"><i class="el-icon-plus"></i>确认与验证</div>
      </div>
      <div class="bot_con" v-else>
        <span class="bc_title">确认与验证<span @click="openRichText('修改确认与验证',2,urgencyHtml)">点击修改</span></span>
        <div class="getHtml" v-html="urgencyHtml"></div>
      </div>
    </div>
    <div v-if="detail != null && detail != ''">
      <div class="button" v-if="detail.signatureList == null">
        <el-button type="primary" @click="submit" style="height: 40px">确认</el-button>
        <el-button @click="showJointyl" style="height: 40px">会签</el-button>
        <el-button @click="showJointyl2" style="height: 40px">报审</el-button>
      </div>
      <div  v-if="detail.signatureList != null && detail.data.content != null && detail.data.confirm!==null">
        <div class="button" v-for="(s,ind) in detail.signatureList" v-if="userName == s.signer && s.status==0" :key="ind">
          <el-button @click="disagree" style="height: 40px">不同意</el-button>
          <el-button @click="Auditing" style="height: 40px">同意</el-button>
        </div>
        <div class="button" v-if="userName == detail.creator">
          <el-button @click="signResult" style="height: 40px">会签结果({{detail.signatureList.length}})</el-button><span v-html="signResultText(detail.signatureList)"></span>
        </div>
      </div>
    </div>
    <div v-else>
      <el-button type="primary" @click="submit" style="height: 40px">确认</el-button>
      <el-button @click="showJointyl" style="height: 40px">会签</el-button>
      <el-button @click="showJointyl2" style="height: 40px">报审</el-button>
    </div>
    <div class="bc" v-if="showBig" @click="hiddenBc"></div>
    <div class="bigImg" v-if="showBig">
      <el-carousel trigger="click" height="100%" style="height: 100% !important;">
        <el-carousel-item v-for="(item,ind) in bigImgList" :key="ind">
          <img :src="item" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <richText_8D v-if="showRichText" :richTitle="richTitle" :richInedex="richInedex" :richVal="richVal" :parLevel="chooseLevel" @params="getParams"></richText_8D>
    <jointlySign v-if="showJointly" :joinType="joinType" :joinId="joinId" :joinPar="joinPar" :joinEdReportId="joinEdReportId" :joinResult="joinResult"></jointlySign>
  </div>
</template>

<script>
  import richText_8D from '../../../dialog/richText_8D'
  import jointlySign from '../../../dialog/jointlySign'
  import {mapGetters,mapActions} from 'vuex'
  export default {
    name: "D_three",
    data() {
      return {
        userName: '',
        detail:null, //查询出来的详情
        descHtml:'', //陈述内容
        urgencyHtml:'', //问题描述
        richTitle:'',
        richInedex:0,
        richVal:'',
        chooseLevel: 0, //选择的等级
        bigImgList:[], //图片放大列表
        showBig:false,
        colorList:[
          {title:'红色',color:'#dc4444',level:'1'},
          {title:'橙色',color:'#ff8c1b',level:'2'},
          {title:'黄色',color:'#ffcd34',level:'3'},
          {title:'蓝色',color:'#3384dd',level:'4'}
        ],
        joinType: 1, //1：会签，2：报审
        joinId: 0, //会签id
        joinEdReportId: 0, //会签id
        joinPar: {}, //会签参数
        joinResult: [], //会签结果
      }
    },
    components:{
      richText_8D,
      jointlySign
    },
    computed:{
      ...mapGetters([
        'publicHaveNode',
        'showRichText',
        'publicNowNode',
        'showJointly'
      ])
    },
    created() {
      let self = this
    },
    mounted() {
      let self = this
      if (self.$route.query.id != undefined){
        self.searchDetailEightD(self.$route.query.id)
      }else {
        self.detail = self.$route.query.pro
      }
      self.userName = localStorage.getItem('userName')
    },
    methods: {
      ...mapActions([
        'upstate'
      ]),
      //查询8D详情
      searchDetailEightD(id){
        let self = this
        self.$http.get(self.conURL + 'mongo/api/docs/' + id).then(res => {
          self.detail = res.data
          self.decompile()
          //图片点击放大功能
          setTimeout(() => {
            self.watchImgs()
          },1000)
        })
      },
      //监听图片的方法
      watchImgs(){
        let self = this
        let imgList = document.getElementsByClassName('imgs')
        for (let i = 0; i < imgList.length; i++){
          document.getElementsByClassName('imgs')[i].onclick = function () {
            let par = document.getElementsByClassName('imgs')[i].parentNode.parentNode
            for (let n = 0; n < par.childNodes.length ;n++){
              if (par.childNodes[n].firstChild != null){
                if (par.childNodes[n].className != 'getHtml'){
                  if (par.childNodes[n].firstChild.tagName != undefined && par.childNodes[n].firstChild.tagName != null){
                    if (par.childNodes[n].firstChild.tagName == 'IMG'){
                      self.bigImgList.push(par.childNodes[n].firstChild.getAttribute('src'))
                    }
                  }
                } else {
                  if (par.childNodes[n].lastChild.tagName != undefined && par.childNodes[n].lastChild.tagName != null){
                    if (par.childNodes[n].lastChild.tagName == 'IMG'){
                      self.bigImgList.push(par.childNodes[n].lastChild.getAttribute('src'))
                    }
                  }
                }
              }
            }
            self.showBig = true
          }
        }
      },
      //时间戳转换成时间
      timestampToTime(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        return Y + M + D;
      },
      //单富文本框显示
      openRichText(name,index,val){
        let self = this
        self.richTitle = name
        self.richInedex = index
        self.richVal = val
        self.upstate({key:'showRichText',val:true})
      },
      //json反编译为html代码
      decompile(){
        let self = this
        if (self.detail.data != undefined){
          if (self.detail.data.content != '' && self.detail.data.content != undefined){
            let descH = self.detail.data.content.replace(/img/g, "img class='imgs'")
            self.descHtml += '<div style="font-size: 16px;color: #666666;margin-bottom: 20px;">' + descH + '</div>'
            if (self.detail.data.contentPics != null && self.detail.data.contentPics != undefined){
              if (self.detail.data.contentPics.length > 0){
                for (let i = 0; i < self.detail.data.contentPics.length; i++){
                  self.descHtml += "<img class='imgs' src='" + self.conImgURL + self.detail.data.contentPics[i] + "'/>"
                }
              }
            }
          }
          if (self.detail.data.confirm != '' && self.detail.data.confirm != undefined){
            let urgencyH = self.detail.data.confirm.replace(/img/g, "img class='imgs'")
            self.urgencyHtml += '<div style="font-size: 16px;color: #666666;margin-bottom: 20px;">' + urgencyH + '</div>'
            if (self.detail.data.confirmPics != null && self.detail.data.confirmPics != undefined){
              if (self.detail.data.confirmPics.length > 0){
                for (let i = 0; i < self.detail.data.confirmPics.length; i++){
                  self.urgencyHtml += "<img class='imgs' src='" + self.conImgURL + self.detail.data.confirmPics[i] + "'/>"
                }
              }
            }
          }
        }
      },
      //确认提交
      submit(){
        let self = this
        self.upstate({key: 'public_backShow',val: true})
        let loginUser = localStorage.getItem('department') + ':' + localStorage.getItem('firstName')
        if (self.$route.query.id == undefined){ //新建8D
          var edReportIds='';
          if (self.$route.query.edReportId != undefined && self.$route.query.edReportId != "undefined" && self.$route.query.edReportId != 0){
            edReportIds = self.$route.query.edReportId;
          }else if(self.detail.id !== undefined && self.detail.id !== ''&& self.detail.id != 0){
            edReportIds = self.detail.id
          }else {
            edReportIds='';
          }
          let par = {
            creator: localStorage.getItem('userName'),
            data:{
              content: self.descHtml,
              contentCreator: loginUser,
              confirm: self.urgencyHtml,
              confirmCreator: loginUser,
            },
            type:'D3'
          }
          if (edReportIds != ''){
            par["edReportId"] = edReportIds;
          }
          self.$http.post(self.conURL + 'mongo/api/eddocs',par).then(res => {
            this.$notify({
              title: '成功',
              message: '8D文件创建成功',
              type: 'success'
            });
            if (res.data.status == 'close'){
              self.$route.matched[1].instances.default.$data.pro.edReport.reportId.push(res.data.id)
              self.upstate({key:'publicHaveNode',val: self.publicHaveNode + 1})
              self.upstate({key:'publicNowNode',val:4})
              this.$router.push({
                path :'/index/public_eightD/D_four',
                query: {edReportId:res.data.edReportId}
              })
            }
            self.upstate({key: 'public_backShow',val: false})
          }).catch(error=>{
            console.log(error)
            this.$notify.error({
              title: '错误',
              message: error
            });
            self.upstate({key: 'public_backShow',val: false})
          });
        }else {
          let par = {
            creator: localStorage.getItem('userName'),
            data:{
              content: self.descHtml,
              contentCreator: loginUser,
              confirm: self.urgencyHtml,
              confirmCreator: loginUser,
              level: self.detail.data.level,
              target: self.detail.data.target,
              title: self.detail.data.title,
            },
            edReportId: self.detail.edReportId,
            id: self.detail.id,
            type:'D3'
          }
          self.$http.post(self.conURL + 'mongo/api/eddocs/update',par).then(res => {
            this.$notify({
              title: '成功',
              message: '修改8D文件成功',
              type: 'success'
            });
            if (res.data.status == 'close'){
              if (self.publicHaveNode - 1 == self.publicNowNode){
                self.upstate({key:'publicHaveNode',val: self.publicHaveNode + 1})
              }
              self.upstate({key:'publicNowNode',val:4})
              this.$router.push({
                path: '/index/public_eightD/D_four',
                query: {edReportId:res.data.edReportId}
              })
            }
            self.upstate({key: 'public_backShow',val: false})
          }).catch(error=>{
            console.log(error)
            this.$notify.error({
              title: '错误',
              message: error
            });
            self.upstate({key: 'public_backShow',val: false})
          });
        }
      },
      //组件返回值
      getParams(params){
        let self = this
        let index = params.richInedex
        let content = params.content
        let resultH = content.replace(/img/g, "img class='imgs'")
        if (params.level != undefined){
          self.chooseLevel = params.level
        }
        switch (index) {
          case 1:
            self.descHtml = resultH
            break
          case 2:
            self.urgencyHtml = resultH
            break
          case 3:
            self.configHtml = resultH
            break
        }
        if (self.detail != undefined && self.detail != null && self.detail != ''){
          self.detail.signatureList = null
        }
        setTimeout(() => {
          self.watchImgs()
        },50)
      },
      //隐藏大图
      hiddenBc(){
        let self = this
        self.showBig = false
        self.bigImgList = []
      },
      //显示会签
      showJointyl(){
        let self = this
        self.joinType = 1
        if (self.detail != undefined){
          self.joinId = self.detail.id
        }
        self.joinEdReportId = self.$route.query.edReportId;
        let par = {
          creator: localStorage.getItem('userName'),
          data:{
            category: self.$parent.pro.edReport.category,
            level: self.$parent.pro.edReport.level,
            target: self.$parent.pro.edReport.target,
            title: self.$parent.pro.edReport.title,
            content: self.descHtml,
            confirm: self.urgencyHtml,
          },
          type:'D3',
        }
        self.joinPar = par
        self.upstate({key:'showJointly',val:true})
      },
      //显示审核
      showJointyl2(){
        let self = this
        self.joinType = 2
        if (self.detail != undefined){
          self.joinId = self.detail.id
        }
        self.joinEdReportId = self.$route.query.edReportId
        let par = {
          creator: localStorage.getItem('userName'),
          data:{
            category: self.$parent.pro.edReport.category,
            level: self.$parent.pro.edReport.level,
            target: self.$parent.pro.edReport.target,
            title: self.$parent.pro.edReport.title,
            content: self.descHtml,
            confirm: self.urgencyHtml,
          },
          type:'D3'
        }
        self.joinPar = par
        self.upstate({key:'showJointly',val:true})
      },
      //不同意
      disagree(){
        let self = this
        self.joinType = 4
        self.joinId = self.detail.id
        self.upstate({key:'showJointly',val:true})
      },
      //同意
      Auditing(){
        let self = this
        self.joinType = 3
        self.joinId = self.detail.id
        self.upstate({key:'showJointly',val:true})
      },
      //会签结果显示文字
      signResultText(list){
        let self = this
        for (let i = 0; i < list.length; i++){
          if (list[i].status == 0){
            return ''
          } else if (list[i].status == -1) {
            return "<i class='el-icon-close' style='font-size: 18px;color: #dc4444;line-height: 42px;margin-left: 10px;margin-right: 5px'></i><span style='font-size: 18px;color: #dc4444;line-height: 42px;'>会签不通过 请修改内容</span>"
          }
        }
        return "<i class='el-icon-check' style='font-size: 18px;color: #4eb240;line-height: 42px;margin-left: 10px;margin-right: 5px'></i><span style='font-size: 18px;color: #4eb240;line-height: 42px;'>会签通过</span>"
      },
      //会签结果
      signResult(){
        let self = this
        self.joinResult = self.detail.signatureList
        self.upstate({key:'showJointly',val:true})
      }
    }
  }
</script>

<style lang="less">
  .D_content{
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 33px 28px;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    border-top: none;
    .title{
      width: 100%;
      line-height: 24px;
      color: #2d7ede;
      .title_left{
        font-size: 24px;
        margin-right: 10px;
      }
      .title_right{
        font-size: 24px;
      }
    }
    .bottom{
      display: flex;
      flex-direction: column;
      width: 100%;
      .bot_con{
        display: flex;
        flex-direction: column;
        padding-top: 30px;
        border-bottom: 1px dashed #e5e5e5;
        .bc_title{
          font-size: 18px;
          line-height: 18px;
          color: #333333;
          text-align: left;
          margin-bottom: 17px;
          span{
            font-size: 16px;
            color: #3384dd;
            line-height: 18px;
            margin-left: 20px;
            cursor: pointer;
          }
        }
        .bc_noCon{
          width: 100%;
          height: 62px;
          line-height: 64px;
          text-align: center;
          border: 1px dashed #e5e5e5;
          background: #f9f9f9;
          font-size: 18px;
          color: #2d7ede;
          margin-bottom: 30px;
          cursor: pointer;
          i{
            margin-right: 10px;
          }
        }
        .getHtml{
          .imgs{
            cursor: pointer;
          }
          p{
            margin: 0;
          }
          .ql-align-center{
            text-align: center;
          }
          .ql-align-right{
            text-align: right;
          }
          .Damon:active{
            position: fixed;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 30%;
            height: 30%;
          }
        }
      }
      .bot_con:last-child{
        border-bottom: none;
      }
    }
    .button{
      display: flex;
      flex-direction: row;
    }
    .bc{
      display: block;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: .3;
      z-index: 11;
    }
    .bigImg{
      z-index: 12;
      margin: auto;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 30%;
      height: 40%;
      img{
        margin: auto;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    }
  }
</style>
